<template>
    <div class="chart">
        <Carousel
                :height="setting.height"
                :autoplay="setting.autoplay"
                :autoplay-speed="setting.autoplaySpeed"
                :dots="setting.dots"
                :radius-dot="setting.radiusDot"
                :trigger="setting.trigger"
                :arrow="setting.arrow">
            <CarouselItem v-for="(obj,i) in chartList" :key="i">
                <img
                        class="carousel-img"
                        :src="obj.chartUrl"
                        @click="openNewPage(obj.webUrl)">
            </CarouselItem>
        </Carousel>
    </div>
</template>

<script>
    export default {
        name: "",
        components: {},
        data() {
            return {
                //轮播图设置
                setting: {
                    //轮播图高度，默认 auto，单位px
                    height: 400,
                    //自动切换
                    autoplay: true,
                    //切换速度
                    autoplaySpeed: 7000,
                    //指示器位置 可选值为 inside（内部），outside（外部），none（不显示）
                    dots: 'inside',
                    //是否圆形指示器
                    radiusDot: true,
                    //指示器的触发方式，可选值为 click（点击），hover（悬停）
                    trigger: 'hover',
                    //切换箭头的显示时机，可选值为 hover（悬停），always（一直显示），never（不显示）
                    arrow: 'hover'
                },
                //轮播图列表
                chartList: []
            }
        },
        methods: {
            //点击轮播图，打开要跳转的页面
            openNewPage: function (webUrl) {
                window.open(webUrl, '_blank');
            },
            getChartList: function () {
                this.axios.get(`/home/chart/chart-list`)
                    .then((data) => {
                        if (data.flag) {
                            this.chartList = data.data
                        }
                    })
            }
        },
        mounted() {
            this.getChartList();
        }
    }
</script>

<style scoped>
    .chart {
        width: 1200px;
        height: 400px;
        margin: 0px auto;
        cursor: pointer;
    }

    /*跑马灯图片样式*/
    .carousel-img {
        display: inline-block;
        width: 100%;
        height: 100%;
        border-radius: 6px;
    }
</style>